<template>
  <div class="mixin-components-container">
    <el-row :gutter="20" style="margin-top:10px;">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>整体导入导出(zip)</span>
          </div>
          <div class="component-item">
              <el-form ref="ruleForm" class="form uploadform">
                <el-form-item>
                 <br>
                </el-form-item>
                <el-form-item>
                  <el-upload
                      class="upload-zip"
                      ref="upload"
                      drag
                      :action= "action"
                      :headers="headers"
                      :on-preview="handlePreview"
                      :before-upload="beforeAvatarUpload"
                      :on-remove="handleRemove"
                      :file-list="fileList"
                      :auto-upload = 'false'
                      :on-success = 'handleSuccess'
                      name="upFile">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  </el-upload>
                </el-form-item>
                <el-form-item>
                  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitDownload">导出全部配置</el-button>
                </el-form-item>
              </el-form>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>properties导入</span>
          </div>
          <div class="component-item">
              <el-form ref="proForm" class="form uploadform">
                <el-form-item>
                  <el-select v-model="form.teamName" style="width: 60%" placeholder="请选择">
                    <el-option
                      v-for="item in Object.keys(options)"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>        
                </el-form-item>
                <el-form-item>
                  <el-upload
                      class="upload-pro"
                      ref="uploadPro"
                      drag
                      :action= "actionpro"
                      :headers="headers"
                      :on-preview="handlePreviewPro"
                      :before-upload="beforeAvatarUploadPro"
                      :on-remove="handleRemovePro"
                      :file-list="fileListpro"
                      :auto-upload = 'false'
                      :on-success = 'handleSuccessPro'
                      :data="form"
                      name="upFile">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  </el-upload>
                </el-form-item>
                <el-form-item>
                  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUploadPro">上传到服务器</el-button>
                </el-form-item>
              </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>
<script>
  import { getToken } from '@/utils/auth'
  import { success } from '@/utils/notify'
  import { check } from '@/utils/resCheck'
  import { getLeftTree } from '@/api/leftTree'
  export default {
    data() {
      return {
        options: {},
        fileList: [],
        fileListpro: [],
        form: {
          teamName: 'default'
        }
      }
    },
    created() {
      this.fetchData()
    },
    computed: {
      headers() {
        return {
          'Authorization': getToken()
        }
      },
      action() {
        return process.env.BASE_API + '/polestar/uploadAll'
      },
      actionpro() {
        return process.env.BASE_API + '/polestar/uploadPropertyItems'
      }
    },
    methods: {
      fetchData() {
        getLeftTree().then(response => {
          if (response.returnCode === 1) {
            this.options = response.propertyRLst
          }
        })
      },
      submitUpload() {
        this.$refs.upload.submit()
      },
      submitUploadPro() {
        this.$refs.uploadPro.submit()
      },
      submitDownload() {
        window.location.href = process.env.BASE_API + 'polestar/downloadAll'
      },
      beforeAvatarUpload(file) {
        const Xls = file.name.split('.')
        if (Xls[1] === 'zip') {
          return file
        } else {
          this.$message.error('导入文件只能是 zip 格式!')
          return false
        }
      },
      beforeAvatarUploadPro(file) {
        const Xls = file.name.split('.')
        if (Xls[1] === 'properties') {
          return file
        } else {
          this.$message.error('导入文件只能是 properties 格式!')
          return false
        }
      },
      handleRemove(file, fileList) {
      },
      handlePreview(file) {
      },
      handleRemovePro(file, fileList) {
      },
      handlePreviewPro(file) {
      },
      handleSuccess(res, file, fileList) {
        if (check(this, res) === true) {
          success(this, '导入成功')
          this.$store.dispatch('GenerateRoutes', { })
        }
      },
      handleSuccessPro(res, file, fileList) {
        if (check(this, res) === true) {
          success(this, '导入成功')
          this.$store.dispatch('GenerateRoutes', { })
        } else {
          this.$refs.uploadPro.clearFiles()
        }
      }
    }
  }
</script>
<style scope>
  .mixin-components-container {
    background-color: #f0f2f5;
    padding: 30px;
    min-height: calc(100vh - 84px);
  }
  .component-item{
    min-height: 200px;
  }
</style>